<template>
	<div class="login_img">
		<el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="0px" class="demo-ruleForm login-container">
			<h3 class="title">吉柚视频•系统登录</h3>
			<el-form-item prop="account"><el-input type="text" v-model="ruleForm2.account" auto-complete="off" placeholder="账号"></el-input></el-form-item>
			<el-form-item prop="checkPass"><el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off" placeholder="密码"></el-input></el-form-item>
			<el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox>
			<el-form-item style="width:100%;">
				<el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit2" :loading="logining" @keyup.enter.native="loginEnter()">登录</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
import { requestLogin } from '../api/api';
//import NProgress from 'nprogress'
export default {
	data() {
		return {
			logining: false,
			ruleForm2: {
				account: 'super',
				checkPass: '1234'
			},
			rules2: {
				account: [
					{ required: true, message: '请输入账号', trigger: 'blur' }
				],
				checkPass: [
					{ required: true, message: '请输入密码', trigger: 'blur' }
				]
			},
			checked: true
		};
	},
	created() {
	    var vm = this;
	    document.onkeydown = function(e) {
	      var key = window.event.keyCode;
	      if (key == 13) {
	        vm.handleSubmit2()
	      }
	    }
	  },
	methods: {
		handleReset2() {
			this.$refs.ruleForm2.resetFields();
		},
		handleSubmit2(ev) {
			var _this = this;
			this.$refs.ruleForm2.validate(valid => {
				if (valid) {
					this.logining = true;
					var loginParams = { mobile: this.ruleForm2.account, pwd: this.ruleForm2.checkPass };
					requestLogin(loginParams).then(data => {
						this.logining = false;
						var res = data.data;
						if (res.code != 0) {
							this.$message({
								message: res.message,
								type: 'error'
							});
						} else {
							sessionStorage.setItem('Token', res.data.token);
							this.$router.push({ path: '/main' });
						}
					});
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.login_img {
	background-image: url(../assets/timg.gif);
	background-size: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}
.login-container {
	/*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	background-clip: padding-box;
	width: 350px;
	padding: 35px 35px 15px 35px;
	background: #fff;
	border: 1px solid #eaeaea;
	box-shadow: 0 0 25px #cac6c6;
	.title {
		margin: 0px auto 40px auto;
		text-align: center;
		color: #505458;
	}
	.remember {
		margin: 0px 0px 35px 0px;
	}
}
</style>
